<template>
  <div class="main">
    <h4>一键盘点</h4>
    <div class="content">
      <div class="left">
        <div class="one">
          <div>资产盘点任务</div>
          <el-select
            class="txt"
            v-model="value"
            effect="dark"
            placeholder="Select"
            @change="change"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              :disabled="item.disabled"
            />
          </el-select>
        </div>
        <div class="secoud">
          <p>资产总数</p>
          <p>已盘点资产</p>
          <p>资产匹配</p>
        </div>
        <div class="three">
          <p>482</p>
          <p>482</p>
          <p>58%</p>
        </div>
      </div>
      <div class="right">
        <div class="top" @click="back">
          <img src="../assets/back2.png" alt="" />
        </div>
        <div class="content">
          <ul class="ul_con">
            <li>| 资产编号</li>
            <li>| 资产类型</li>
            <li>| 资产位置</li>
            <li>| 挂账人</li>
            <li>| 当前位置</li>
            <li>| 上报时间</li>
            <li class="controls">| 状态</li>
            <li class="controls">| 操作</li>
          </ul>
          <div v-for="(item, index) in date" :key="index" class="ul">
            <div>{{ item.id }}</div>
            <div>{{ item.type }}</div>
            <div>{{ item.position }}</div>
            <div>{{ item.debtor }}</div>
            <div>{{ item.currentPosition }}</div>
            <div>{{ item.time }}</div>
            <div :class="item.status == '正常' ? 'normal' : 'abnormal'">
              {{ item.status }}
            </div>
            <div>{{ item.controls }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted, onUnmounted, defineEmits } from "vue";
const emit = defineEmits(["getMsg"]);
let value = ref("一号楼");
let options = [
  {
    value: "一号楼",
    label: "一号楼",
  },
  {
    value: "三号楼",
    label: "三号楼",
  },
];
let date = ref([
  {
    id: "A18041416",
    type: "电子设备/办公设备/电话会议",
    position: "中国广东省/深圳/坂田区",
    debtor: "002***00",
    currentPosition: "中国广东省/深圳/坂田区/主培楼",
    time: "2023-09-23",
    status: "正常",
    controls: "轨迹",
    controlsId: "1",
  },
  {
    id: "A18041416",
    type: "电子设备/办公设备/电话会议",
    position: "中国广东省/深圳/坂田区",

    debtor: "002***00",
    currentPosition: "中国广东省/深圳/坂田区/主培楼",
    time: "2023-09-23",
    status: "正常",
    controls: "轨迹",
    controlsId: "2",
  },
  {
    id: "A18041416",
    type: "电子设备/办公设备/电话会议",
    position: "中国广东省/深圳/坂田区",
    debtor: "002***00",
    currentPosition: "中国广东省/深圳/坂田区/主培楼",
    time: "2023-09-23",
    status: "异常",
    controls: "轨迹",
    controlsId: "2",
  },
  {
    id: "A18041416",
    type: "电子设备/办公设备/电话会议",
    position: "中国广东省/深圳/坂田区",
    debtor: "002***00",
    currentPosition: "中国广东省/深圳/坂田区/主培楼",
    time: "2023-09-23",
    status: "正常",
    controls: "轨迹",
  },
  {
    id: "A18041416",
    type: "电子设备/办公设备/电话会议",
    position: "中国广东省/深圳/坂田区",
    debtor: "002***00",
    currentPosition: "中国广东省/深圳/坂田区/主培楼",
    time: "2023-09-23",
    status: "正常",
    controls: "轨迹",
  },
  {
    id: "A18041416",
    type: "电子设备/办公设备/电话会议",
    position: "中国广东省/深圳/坂田区",
    debtor: "002***00",
    currentPosition: "中国广东省/深圳/坂田区/主培楼",
    time: "2023-09-23",
    status: "正常",
    controls: "轨迹",
  },
  {
    id: "A18041416",
    type: "电子设备/办公设备/电话会议",
    position: "中国广东省/深圳/坂田区",
    debtor: "002***00",
    currentPosition: "中国广东省/深圳/坂田区/主培楼",
    time: "2023-09-23",
    status: "正常",
    controls: "轨迹",
  },
  {
    id: "A18041416",
    type: "电子设备/办公设备/电话会议",
    position: "中国广东省/深圳/坂田区",
    debtor: "002***00",
    currentPosition: "中国广东省/深圳/坂田区/主培楼",
    time: "2023-09-23",
    status: "正常",
    controls: "轨迹",
  },
]);
let num = 0;
// 定时器
let box = document.getElementsByClassName("con");
let time = ref(null);
let timre = () => {
  time = setInterval(() => {
    date.value.shift();
    date.value.push(
      {
        id: "A18041416",
        type: "电子设备/办公设备/电话会议",
        position: "中国广东省/深圳/坂田区",
        debtor: "002***00",
        currentPosition: "中国广东省/深圳/坂田区/主培楼",
        time: "2023-09-23",
        status: "正常",
        controls: "轨迹",
      },
      {
        id: "A18041416",
        type: "电子设备/办公设备/电话会议",
        position: "中国广东省/深圳/坂田区",
        debtor: "002***00",
        currentPosition: "中国广东省/深圳/坂田区/主培楼",
        time: "2023-09-23",
        status: "异常",
        controls: "轨迹",
      }
    );
  }, 1000);
};
// 显示和隐藏
const back = () => {
  emit("getMsg", true);
};
// 改变楼层
const change = () => {
  console.log(11);
  clearInterval(time);
  if (value.value == "一号楼") {
    date.value = [
      {
        id: "A18041416",
        type: "电子设备/办公设备/电话会议",
        position: "中国广东省/深圳/坂田区",
        debtor: "002***00",
        currentPosition: "中国广东省/深圳/坂田区/主培楼",
        time: "2023-09-23",
        status: "正常",
        controls: "轨迹",
      },
      {
        id: "A18041416",
        type: "电子设备/办公设备/电话会议",
        position: "中国广东省/深圳/坂田区",

        debtor: "002***00",
        currentPosition: "中国广东省/深圳/坂田区/主培楼",
        time: "2023-09-23",
        status: "异常",
        controls: "轨迹",
      },
    ];
    timre();
  } else {
    date.value = [
      {
        id: "A18041416",
        type: "电子设备/办公设备/电话会议",
        position: "中国广东省/深圳/坂田区",
        debtor: "002***00",
        currentPosition: "中国广东省/深圳/坂田区/主培楼",
        time: "2023-09-23",
        status: "正常",
        controls: "轨迹",
      },
      {
        id: "A18041416",
        type: "电子设备/办公设备/电话会议",
        position: "中国广东省/深圳/坂田区",

        debtor: "002***00",
        currentPosition: "中国广东省/深圳/坂田区/主培楼",
        time: "2023-09-23",
        status: "正常",
        controls: "轨迹",
      },
      {
        id: "A18041416",
        type: "电子设备/办公设备/电话会议",
        position: "中国广东省/深圳/坂田区",
        debtor: "002***00",
        currentPosition: "中国广东省/深圳/坂田区/主培楼",
        time: "2023-09-23",
        status: "异常",
        controls: "轨迹",
      },
      {
        id: "A18041416",
        type: "电子设备/办公设备/电话会议",
        position: "中国广东省/深圳/坂田区",
        debtor: "002***00",
        currentPosition: "中国广东省/深圳/坂田区/主培楼",
        time: "2023-09-23",
        status: "正常",
        controls: "轨迹",
      },
      {
        id: "A18041416",
        type: "电子设备/办公设备/电话会议",
        position: "中国广东省/深圳/坂田区",
        debtor: "002***00",
        currentPosition: "中国广东省/深圳/坂田区/主培楼",
        time: "2023-09-23",
        status: "正常",
        controls: "轨迹",
      },
      {
        id: "A18041416",
        type: "电子设备/办公设备/电话会议",
        position: "中国广东省/深圳/坂田区",
        debtor: "002***00",
        currentPosition: "中国广东省/深圳/坂田区/主培楼",
        time: "2023-09-23",
        status: "正常",
        controls: "轨迹",
      },
    ];
    timre();
  }
};
onMounted(() => {
  timre();
});
onUnmounted(() => {
  clearInterval(time);
  // time.value = '';
});
</script>
<style scoped>
.main {
  width: 11rem;
  position: absolute;
  left: 22%;
  bottom: 1%;
  background-color: #131d2d;
  color: #fff;
}
h4 {
  font-size: 18px;
  padding: 16px;
}
.left {
  float: left;
  padding: 0 0 0 0.05rem;
}
:deep(.txt .el-input__wrapper) {
  background-color: #000;
  color: #fff;
}
:deep(.txt  .el-input__inner .el-select.dropdown) {
  background-color: #000;
  color: #fff;
}

:deep(.el-select .el-input__inner) {
  background-color: #000;
  color: #fff;
}

:deep(.el-select  .el-icon-arrow-down) {
  color: #fff;
}
.left .one {
  display: flex;
  font-size: 16px;
  padding: 0.02rem 0.02rem;
  margin: 0.2rem;
}
.one div {
  padding-right: 0.15rem;
}
.el-select {
  width: 2.2rem;
  font-size: 16px;
}
.normal {
  color: #295f14;
}
.abnormal {
  color: red;
}
.secoud {
  margin: 0.05rem 0 0 0;
  display: flex;
}
.secoud p {
  width: 1.2rem;
  text-align: center;
  font-size: 14px;
}

.three p {
  width: 1.2rem;
  float: left;
  text-align: center;
  font-size: 16px;
}
li {
  margin: 0;
  padding: 0;
}
.right {
  float: right;
  padding: 0;
}
.right .content {
  height: 1.5rem;
  overflow: hidden;
  padding-right: 0.3rem;
  padding-bottom: 0.2rem;
  box-sizing: border-box;
}
.right .top {
  position: absolute;
  right: 5%;
  top: 10%;
  display: flex;
  justify-content: flex-end;
}
.top img {
  margin-right: 0;
  width: 0.2rem;
  height: 0.2rem;
}
.ul_con {
  font-size: 16px;
  display: flex;
}
.ul_con li {
  font-size: 14px;
  width: 0.8rem;
  overflow: hidden;
}

.ul_con li:nth-child(2) {
  width: 1rem;
}
.ul_con li:nth-child(3) {
  width: 1rem;
}
.ul_con li:nth-child(5) {
  width: 1rem;
}
.ul_con .controls {
  width: 0.6rem;
}
.ul {
  /* margin: 0.1rem 0; */
  padding: 0.05rem 0;
  display: flex;
  font-size: 14px;
  background: #141c58;
}
.ul:nth-child(2n) {
  background: #131d2d;
}
.ul div {
  cursor: pointer;
  display: inline-block;
  width: 0.8rem;
  overflow: hidden;
  white-space: nowrap;
  font-size: 12px;
}
.ul div:nth-child(2) {
  width: 1rem;
}
.ul div:nth-child(3) {
  width: 1rem;
}
.ul div:nth-child(5) {
  width: 1rem;
}
.ul div:nth-child(7) {
  width: 0.6rem;
}
.ul div:nth-child(8) {
  width: 0.6rem;
  color: #fff;
  text-align: center;
  background-color: #1c6279;
}
</style>
